<template>
  <el-main>
    <!--  搜索栏 -->
    <el-form :model="searchParm" :inline="true" size="default">
      <el-form-item label="">
        <el-input v-model="searchParm.nickName" placeholder="通过昵称搜索">
          <template #suffix>
            <el-button icon="CloseBold" @click="resetBtn" type="text" style="padding: 0;"></el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <!-- <el-button icon="CloseBold" @click="resetBtn" type="danger" plain></el-button> -->
        <el-button icon="Search" @click="searchBtn">搜索</el-button>
        <el-button type="primary" icon="CirclePlus" @click="addBtn">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 管理员表格 -->
    <el-table :height="tableHeight" :data="tableList" border stripe>
      <el-table-column prop="userId" label="用户id"></el-table-column>
      <el-table-column prop="nickName" label="昵称"></el-table-column>
      <el-table-column prop="userName" label="用户名"></el-table-column>
      <el-table-column prop="password" label="密码"></el-table-column>
      <el-table-column prop="sex" label="性别">
        <template #default="scope">
          <el-tag v-if="scope.row.sex == '0'">男</el-tag>
          <el-tag v-if="scope.row.sex == '1'">女</el-tag>
          <el-tag v-if="scope.row.sex == '2'">其他</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="phoneNum" label="电话"></el-table-column>
      <el-table-column prop="status" label="用户状态">
        <template #default="scope">
          <el-tag v-if="scope.row.status == '0'" type="danger">停用中</el-tag>
          <el-tag v-if="scope.row.status == '1'">使用中</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-tag type="primary" size="default" @click="editBtn(scope.row)">编辑</el-tag>
          <el-tag type="danger" size="default" @click="delBtn(scope.row)">删除</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <!-- 实现底部分页功能 -->
    <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page.sync="searchParm.currentPage"
      :page-sizes="[10, 20, 40, 80, 100]" :page-size="searchParm.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="searchParm.total">
      :pager-count="7">
    </el-pagination>

    <!-- 新增管理员弹窗 -->

    <SysDialog :title="dialog.title" :width="dialog.width" :height="dialog.height" :visible="dialog.visible"
      @on-close="onClose" @on-confirm="commitAdd">
      <!-- 新增管理员弹窗 表单 -->
      <!--  v-slot:content 与sysdialog中<slot name="content">名字一致 -->
      <template v-slot:content>
        <el-form :model="addModel" ref="addRef" :rules="rules" label-width="80px" :inline="false" size="default">
          <!-- prop字段绑定的名称和addModel绑定的名称要一致 -->
          <el-form-item prop="nickName" label="姓名">
            <el-input v-model="addModel.nickName"></el-input>
          </el-form-item>
          <el-form-item prop="sex" label="性别">
            <el-radio-group v-model="addModel.sex">
              <!-- Radio 单选框之前的 label 属性可以作为 值 来进行选项，现在得换成 value 了 -->
              <el-radio :value="'0'" size="large">男</el-radio>
              <el-radio :value="'1'" size="large">女</el-radio>
              <el-radio :value="'2'" size="large">其他</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="phoneNum" label="电话号码">
            <el-input v-model="addModel.phoneNum"></el-input>
          </el-form-item>
          <el-form-item prop="userName" label="登录账号">
            <el-input v-model="addModel.userName"></el-input>
          </el-form-item>
          <el-form-item prop="password" label="登录密码">
            <el-input v-model="addModel.password"></el-input>
          </el-form-item>
          <el-form-item prop="status" label="账号状态">
            <el-radio-group v-model="addModel.status">
              <el-radio :value="'0'" size="large">停用中</el-radio>
              <el-radio :value="'1'" size="large">使用中</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </template>
    </SysDialog>
  </el-main>
</template>

<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from "vue";
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import { ElMessage, type FormInstance } from "element-plus";
import { addAdminUserApi, queryAdminUserListApi, deleteAdminUserApi, editAdminUserApi } from "@/api/sysuser/index";
import { config } from "process";
import { User } from "@/api/sysuser/userModel";
import { Title } from "@/type/BaseEnum";
import useInstance from "@/hooks/useInstance"
// 全局变量
const { global } = useInstance()
// 表单ref属性
const addRef = ref<FormInstance>();
// 弹窗绑定对象
const { dialog, onClose } = useDialog();
// 搜索条件,对应UserListParams
const searchParm = reactive({
  nickName: "",
  pageSize: 10,
  currentPage: 1,
  total: 0,
});
// 表格数据
const tableList = ref([]);
// 表格高度
const tableHeight = ref(0);
// 新增or编辑判断标志 0新增 1编辑
const editFlag = ref("");
// 新增按钮点击事件
const addBtn = () => {
  // 标题
  dialog.title = Title.EDIT;
  editFlag.value = "0";
  // 设置弹窗高度！！
  dialog.height = 450;
  dialog.visible = true;
  console.log("新增按钮点击事件");
  // 新增编辑用的同一个弹框，使用新增时需清空表单
  addRef.value?.resetFields();
};
// 新增表单绑定对象
// nickName 昵称
const addModel = reactive({
  userId: "",
  nickName: "",
  userName: "",
  password: "",
  phoneNum: "",
  sex: "",
  status: "",
});

// 表单验证规则
const rules = {
  nickName: [{ required: true, message: "输入你的昵称", trigger: "blur" }],
  userName: [{ required: true, message: "输入你的账号", trigger: "blur" }],
  password: [{ required: true, message: "输入你的密码", trigger: "blur" }],
  phoneNum: [{ required: true, message: "输入你的电话", trigger: "blur" }],
  sex: [{ required: true, message: "选择你的性别", trigger: "blur" }],
  status: [{ required: true, message: "选择当前账号状态", trigger: "blur" }],
};
// 新增or编辑表单提交事件
const commitAdd = () => {
  addRef.value?.validate(async (valid) => {
    if (valid) {
      console.log(addModel);
      // 判断是新增还是编辑
      let result = null;
      if (editFlag.value == "0") {
        console.log("新增");
        // 调用新增接口
        result = await addAdminUserApi(addModel);
      } else {
        console.log("编辑");
        // 调用编辑接口
        result = await editAdminUserApi(addModel);
      }
      // 新增成功或编辑成功
      if (result && result.code == 200) {
        console.log("返回code成功");
        ElMessage.success(result.msg);
        // 刷新列表数据
        getAdminUserList();
        // 关闭弹窗
        dialog.visible = false;
        console.log("提交成功");
      }
    } else {
      console.log("提交失败");
    }
  });
};

// 获取列表数据
const getAdminUserList = async () => {
  const result = await queryAdminUserListApi(searchParm);
  if (result && result.code == 200) {
    console.log("获取列表数据成功", result);
    tableList.value = result.data.records;

    searchParm.total = result.data.total;
  }
};
// 搜索按钮点击事件
const searchBtn = () => {
  console.log("搜索按钮点击事件");
  // 获取列表数据
  getAdminUserList();
};
// 重置搜索条件按钮点击事件
const resetBtn = () => {
  console.log("重置搜索条件按钮点击事件");
  // 重置搜索条件
  searchParm.nickName = "";
  searchParm.currentPage = 1;
  // 获取列表数据
  getAdminUserList();
};
// 编辑按钮点击事件
const editBtn = (row: User) => {
  editFlag.value = "1";
  console.log("编辑按钮点击事件", row);
  // 标题
  dialog.title = Title.EDIT;
  dialog.height = 450;
  dialog.visible = true;
  // 赋值表单数据
  nextTick(() => {
    Object.assign(addModel, row);
  });
};
// 删除按钮点击事件
const delBtn = async (row: User) => {
  console.log("删除按钮点击事件", row);
  // 找到$confirm 
  console.log(global)
  // 注意async和await成对使用
  const confirm = await global.$myconfirm("确认删除吗？");
  if (confirm) {
    const result = await deleteAdminUserApi(row.userId);
    if (result && result.code == 200) {
      console.log("删除成功");
      ElMessage.success(result.msg);
      // 刷新列表数据
      getAdminUserList();
    }
  } else {
    console.log("取消删除");
  }

};
// 页码大小改变事件
const sizeChange = (pageSize: number) => {
  console.log("页码大小改变事件", pageSize);

};
// 页码改变事件
const currentChange = (currentPage: number) => {
  console.log("页码改变事件", currentPage);
  searchParm.currentPage = currentPage;
  getAdminUserList();
};
// 页面加载完成后重新获取表格数据

onMounted(() => {
  // 获取表格高度
  tableHeight.value = document.documentElement.clientHeight - 200;
  // tableHeight.value = window.innerHeight - 200;
  // 获取列表数据
  getAdminUserList();
  console.log("页面加载完成");
});
</script>

<style scoped></style>
